// // my-app/src/components/biogComponent/BlogDetail.js
// import React, { useEffect, useState } from 'react';
// import { fetchBlogById } from '../../util/actions/blogAction';
// import { getCommentsByBlogId, addComment, deleteComment, replyComment } from '../../util/actions/commentAction';
// import { getAttachmentsByBlogId, uploadFile, downloadFile } from '../../util/actions/attachmentAction';
// import { Button, Input, List, Spin } from 'antd';

// const BlogDetails = ({ blogId }) => {
//   const [blog, setBlog] = useState(null);
//   const [comments, setComments] = useState([]);
//   const [attachments, setAttachments] = useState([]);
//   const [loading, setLoading] = useState(true);
//   const [newComment, setNewComment] = useState('');
//   const [token, setToken] = useState(null); // Assume you handle token storage/retrieval

//   const fetchDetails = async () => {
//     try {
//       const blogData = await fetchBlogById(blogId);
//       const commentData = await getCommentsByBlogId(blogId);
//       const attachmentData = await getAttachmentsByBlogId(blogId);

//       setBlog(blogData);
//       setComments(commentData);
//       setAttachments(attachmentData);
//       setLoading(false);
//     } catch (error) {
//       console.error(error);
//       setLoading(false);
//     }
//   };

//   const handleAddComment = async () => {
//     if (!newComment.trim()) return;
//     try {
//       await addComment(blogId, newComment, token);
//       const commentData = await getCommentsByBlogId(blogId);
//       setComments(commentData);
//       setNewComment('');
//     } catch (error) {
//       console.error(error);
//     }
//   };

//   const handleDeleteComment = async (commentId) => {
//     try {
//       await deleteComment(commentId, token);
//       const commentData = await getCommentsByBlogId(blogId);
//       setComments(commentData);
//     } catch (error) {
//       console.error(error);
//     }
//   };

//   const handleReplyComment = async (commentId, content) => {
//     try {
//       await replyComment(commentId, content, token);
//       const commentData = await getCommentsByBlogId(blogId);
//       setComments(commentData);
//     } catch (error) {
//       console.error(error);
//     }
//   };

//   const handleUploadFile = async (file) => {
//     try {
//       const response = await uploadFile(blogId, file);
//       setAttachments([...attachments, response.file]);
//     } catch (error) {
//       console.error(error);
//     }
//   };

//   const handleDownloadFile = (filename) => {
//     downloadFile(filename).catch(error => console.error(error));
//   };

//   useEffect(() => {
//     fetchDetails();
//   }, [blogId]);

//   if (loading) return <Spin />;

//   return (
//     <div>
//       <h1>{"标题："+blog.title}</h1>
//       <p>{blog.content}</p>
//       <div>
//         <h2>评论：</h2>
//         <List
//           dataSource={comments}
//           renderItem={(comment) => (
//             <List.Item
//               actions={[
//                 <Button onClick={() => handleDeleteComment(comment.comment_id)}>Delete</Button>,
//                 <Button onClick={() => handleReplyComment(comment.comment_id, 'Reply content')}>Reply</Button>
//               ]}
//             >
//               {comment.content}
//             </List.Item>
//           )}
//         />
//         <Input.TextArea value={newComment} onChange={(e) => setNewComment(e.target.value)} />
//         <Button onClick={handleAddComment}>发表评论</Button>
//       </div>
//       <div>
//         <h2>Attachments</h2>
//         <List
//           dataSource={attachments}
//           renderItem={(attachment) => (
//             <List.Item
//               actions={[
//                 <Button onClick={() => handleDownloadFile(attachment.filename)}>下载</Button>
//               ]}
//             >
//               {attachment.filename}
//             </List.Item>
//           )}
//         />
//         <input type="file" onChange={(e) => handleUploadFile(e.target.files[0])} />
//       </div>
//     </div>
//   );
// };

// export default BlogDetails;
